<template>
    <div class="searchBox" >
      <ul class="warp">
      <transition-group name="move" enter-active-class="bounceIn" leave-active-class="bounceOut">
        <li v-for="(item,index) in count" :key="index" :class="'animated music'+index" v-show="!$store.state.searchShow">
          <router-link :to="'/music/'+item.id" tag="div" class="toBox" @click.native="firstType">
          <span>
            <p class="name">{{item.name}}</p>
            <p class="auther">{{item.artists[0].name}}</p>
          </span>
          <span class="album">专辑《 {{item.album.name}} 》
            <i class="go"></i>
          </span>
          </router-link>
        </li>
      </transition-group>
      </ul>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    computed:mapState({
      count: state => state.musicList,
    }),
    methods:{
      firstType:function (){
        this.$store.state.searchShow=true;
      }
    }
}
</script>

<style lang="Sass">
@mixin transition-delay ($sizing) {
    -webkit-transition-delay:$sizing;
       -moz-transition-delay:$sizing;
            transition-delay:$sizing;
}
  .searchBox{
    .warp{ width: 96%; margin: 0 auto; list-style: none;

    .music0{ transition-delay: 0.1s}
    .music1{ transition-delay: 0.2s}
    .music2{ transition-delay: 0.3s}
    .music3{ transition-delay: 0.4s}
    .music4{ transition-delay: 0.5s}
    .music5{ transition-delay: 0.6s}
    .music6{ transition-delay: 0.7s}
    .music7{ transition-delay: 0.8s}
    .music8{ transition-delay: 0.9s}
    .music9{ transition-delay: 1s}


        li{text-align: left; font-size: 14px; margin-top: 10px; width: 100%;

          .toBox{width: 100%; display: flex; align-items: center;

          span{display: inline-block; vertical-align: top; flex:0 0 150px;

            p{margin: 0; padding: 0;  text-align: left;}
            .name{font-size: 16px;}
            .auther{font-size: 12px; color: #888; }
          }
          .album{font-size: 16px; flex:1; color: #888; position: relative; padding-right: 13px; text-align: right;

            .go:after{border: 2px solid #c8c8cd;
                border-bottom-width: 0;
                border-left-width: 0;
                content: "";
                top: 50%;
                right: 5px;
                position: absolute;
                width: 5px;
                height: 5px;
                -webkit-transform: translateY(-50%) rotate(45deg);
                transform: translateY(-50%) rotate(45deg);}
          }
          }
        }
      }
  }

</style>